import React, { memo } from "react";

import {
  RecommendWrapper,
  Content,
  RecommendLeft,
  RecommendRight,
} from "./style";
import Banner from "./c-cpns/top-banners";
import HotRecommend from "./c-cpns/hot-recommend";
import NewAlbum from "./c-cpns/new-album";
import RecommendRanking from "./c-cpns/recommend-ranking";
import Login from "./c-cpns/login";
import HotRadio from "./c-cpns/hot-radio";
import SettleSinger from "./c-cpns/settle-singer";
function Recommend(props) {
  return (
    <RecommendWrapper>
      <Banner />
      <Content className="wrap-v2">
        <RecommendLeft>
          <HotRecommend />
          <NewAlbum />
          <RecommendRanking />
        </RecommendLeft>
        <RecommendRight>
          <Login />
          <SettleSinger />
          <HotRadio />
        </RecommendRight>
      </Content>
    </RecommendWrapper>
  );
}
export default memo(Recommend);

// function Recommend(props) {
//   const { getBanners } = props;
//   useEffect(() => {
//     getBanners();
//   }, [getBanners]);
//   return <div>Recommend</div>;
// }
// const mapStateToProps = (state) => {
//   return {
//     topBanners: state.recommend.topBanners,
//   };
// };
// const mapDispatchToProps = (dispatch) => ({
//   getBanners: () => {
//     dispatch(getTopBannerAction());
//   },
// });

// export default connect(mapStateToProps, mapDispatchToProps)(memo(Recommend));
